<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 马鞍山非急救转运调度中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&amp;display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1a5fb4;
            --secondary-color: #3584e4;
            --light-bg: #f8f9fa;
            --border-color: #e5e7eb;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --info-color: #3b82f6;
            --pending-color: #f59e0b;
            --assigned-color: #8b5cf6;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f9fafb;
            color: var(--text-primary);
            overflow-x: hidden;
        }
        
        .main-container {
            width: 100%;
            padding: 16px;
            max-width: none;
        }
        
        .page-header {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 16px;
            border: 1px solid var(--border-color);
        }
        
        .page-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        
        .page-subtitle {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }
        
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-pending {
            background-color: #fef3c7;
            color: #92400e;
        }
        .status-assigned {
            background-color: #dbeafe;
            color: #1e40af;
        }
        .status-in-progress {
            background-color: #e0e7ff;
            color: #3730a3;
        }
        .status-completed {
            background-color: #d1fae5;
            color: #065f46;
        }
        .status-cancelled {
            background-color: #fee2e2;
            color: #991b1b;
        }

        /* 水平时间线样式 - 去掉横向滚动 */
        .timeline-horizontal {
            display: flex;
            align-items: center;
            position: relative;
            padding: 20px 0;
            width: 100%;
        }
        .timeline-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            min-width: 100px;
            flex: 1;
            max-width: 180px;
        }
        .timeline-connector {
            flex: 1;
            height: 2px;
            background-color: #e5e7eb;
            position: relative;
            top: -20px;
            min-width: 20px;
        }
        .timeline-connector.completed {
            background-color: #3b82f6;
        }
        .timeline-node {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 13px;
            color: white;
            position: relative;
            z-index: 2;
            background-color: #9ca3af;
            border: 3px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .timeline-node.completed {
            background-color: #3b82f6;
        }
        .timeline-node.current {
            background-color: #10b981;
            animation: pulse-green 2s infinite;
        }
        @keyframes pulse-green {
            0% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
            }
            70% {
                box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }
        .timeline-title {
            font-size: 12px;
            font-weight: 500;
            margin-top: 6px;
            text-align: center;
            color: #374151;
            line-height: 1.2;
        }
        .timeline-step.completed .timeline-title {
            color: #3b82f6;
        }
        .timeline-step.current .timeline-title {
            color: #10b981;
            font-weight: 600;
        }
        .timeline-time {
            font-size: 10px;
            color: #6b7280;
            margin-top: 2px;
            text-align: center;
        }
        .timeline-detail {
            font-size: 11px;
            color: #6b7280;
            margin-top: 3px;
            text-align: center;
            max-width: 140px;
            line-height: 1.3;
        }

        /* 时间线详情弹窗 */
        .timeline-detail-popup {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 10;
            min-width: 200px;
            margin-bottom: 10px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        .timeline-step:hover .timeline-detail-popup {
            opacity: 1;
            visibility: visible;
        }
        .timeline-detail-popup::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: white;
        }
        .timeline-detail-popup-title {
            font-weight: 600;
            font-size: 13px;
            margin-bottom: 4px;
            color: #1f2937;
        }
        .timeline-detail-popup-time {
            font-size: 11px;
            color: #6b7280;
            margin-bottom: 6px;
        }
        .timeline-detail-popup-content {
            font-size: 12px;
            color: #4b5563;
            line-height: 1.4;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 8px;
            color: white;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            transform: translateX(120%);
            transition: transform 0.3s ease;
        }
        .notification.show {
            transform: translateX(0);
        }
        .notification.success {
            background-color: #10b981;
        }
        .notification.error {
            background-color: #ef4444;
        }
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .modal.show {
            display: flex;
        }
        .modal-content {
            background-color: white;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        /* 按钮容器样式优化 */
        .button-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 12px;
            flex-wrap: nowrap;
        }
        
        .btn {
            white-space: nowrap;
            min-width: 100px;
        }
    </style>
</head>
<body style="margin: 0; padding: 0; font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;" class="bg-gray-50">
    <!-- 顶部标题栏 -->
    <header style="background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);" class="text-white py-2.5 px-6 shadow-xl">
        <div class="flex justify-between items-center">
            <div class="flex-1"></div>
            <h1 class="text-3xl font-bold flex-1 text-center tracking-wide">马鞍山非急救转运调度中心</h1>
            <div class="flex-1 flex justify-end items-center space-x-4">
                <div style="background: rgba(255, 255, 255, 0.2);" class="flex items-center space-x-3 px-4 py-2 rounded-full backdrop-blur-sm">
                    <i class="fas fa-user-circle text-xl"></i>
                    <span class="font-medium">调度员 张晓丽</span>
                </div>
                <button style="transition: all 0.3s ease;" class="text-white hover:bg-white/20 p-3 rounded-full transition-all duration-300 hover:rotate-90">
                    <i class="fas fa-cog text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 导航栏 -->
    <nav style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2);" class="shadow-lg sticky top-0 z-50">
        <div class="flex justify-center">
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-th-large text-lg" style="transition: all 0.3s ease;"></i>
                <span>调度中心</span>
            </a>
            <a href="#" class="nav-item active px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; color: #3B82F6; font-weight: 600;">
                <i class="fas fa-clipboard-list text-lg" style="transition: all 0.3s ease;"></i>
                <span>订单管理</span>
                <span style="content: ''; position: absolute; bottom: 0; left: 50%; width: 80%; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);"></span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-users text-lg" style="transition: all 0.3s ease;"></i>
                <span>人员管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-ambulance text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆管理</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-truck text-lg" style="transition: all 0.3s ease;"></i>
                <span>车辆状态</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-map-marked-alt text-lg" style="transition: all 0.3s ease;"></i>
                <span>实时监控</span>
            </a>
            <a href="#" class="nav-item px-8 py-4 text-gray-700 flex items-center space-x-3" style="position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;" onmouseover="this.style.background='linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 64, 175, 0.05) 100%)'; this.style.transform='translateY(-1px)'; this.querySelector('i').style.transform='scale(1.1)';" onmouseout="this.style.background=''; this.style.transform=''; this.querySelector('i').style.transform='';">
                <i class="fas fa-coins text-lg" style="transition: all 0.3s ease;"></i>
                <span>财务管理</span>
            </a>
        </div>
    </nav>

    <div class="main-container">
        <!-- 合并后的页面标题 -->
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="flex items-center space-x-4 mb-2">
                        <h1 class="page-title">订单详情</h1>
                        <span class="status-badge status-pending" id="order-status">待分配</span>
                    </div>
                    <div class="text-sm text-gray-600">
                        <span>订单编号：AJJS2131529168</span>
                        <span class="mx-2">|</span>
                        <span>创建时间：2024-01-15 14:30:25</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="button-container">
                        <button class="btn btn-secondary" onclick="window.history.back()">
                            <i class="bi bi-arrow-left me-2"></i>返回列表
                        </button>
                        <button class="btn btn-primary" id="action-btn">
                            <i class="bi bi-people-fill me-2"></i>分配指派
                        </button>
                        <button class="btn btn-danger" id="header-cancel-btn" style="display: none;">
                            <i class="bi bi-x-circle me-2"></i>取消订单
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单进度时间线（通栏） -->
        <div class="w-full bg-white border-b border-gray-200">
            <div class="max-w-7xl mx-auto p-6">
                <div class="timeline-horizontal" id="order-timeline">
                    <!-- 时间线节点将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="w-full">
            <div class="max-w-7xl mx-auto p-6">
                <div class="flex gap-6">
                    <!-- 左侧主内容区 -->
                    <div class="flex-1 space-y-6">
                        <!-- 转运信息 -->
                        <div class="bg-white rounded border border-gray-200 p-6">
                            <h3 class="text-lg font-bold mb-4 flex items-center">
                                <div class="w-5 h-5 flex items-center justify-center mr-2">
                                    <i class="ri-car-line text-lg"></i>
                                </div>
                                转运信息
                            </h3>
                            <div class="space-y-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <span class="text-sm text-gray-600">用车目的：</span>
                                        <span class="text-sm">转院</span>
                                    </div>
                                    <div>
                                        <span class="text-sm text-gray-600">来源：</span>
                                        <span class="text-sm">电话录入</span>
                                    </div>
                                    <div>
                                        <span class="text-sm text-gray-600">转运时间：</span>
                                        <span class="text-sm">2024-01-15 16:00</span>
                                    </div>
                                    <div>
                                        <span class="text-sm text-gray-600">订单状态：</span>
                                        <span class="text-sm font-medium" id="detail-status">待分配</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 起终点信息 -->
                        <div class="bg-white rounded border border-gray-200 p-6">
                            <h3 class="text-lg font-bold mb-4 flex items-center">
                                <div class="w-5 h-5 flex items-center justify-center mr-2">
                                    <i class="ri-hospital-line text-lg"></i>
                                </div>
                                起终点信息
                            </h3>
                            <div class="space-y-4">
                                <div>
                                    <div class="flex items-center space-x-2 mb-2">
                                        <span class="text-red-500">*</span>
                                        <span class="text-sm">起点</span>
                                        <div class="w-5 h-5 flex items-center justify-center">
                                            <i class="ri-map-pin-line text-lg"></i>
                                        </div>
                                    </div>
                                    <p class="text-sm">马鞍山市人民医院急诊科</p>
                                </div>
                                <div>
                                    <div class="flex items-center space-x-2 mb-2">
                                        <span class="text-red-500">*</span>
                                        <span class="text-sm">终点</span>
                                        <div class="w-5 h-5 flex items-center justify-center">
                                            <i class="ri-map-pin-line text-lg"></i>
                                        </div>
                                    </div>
                                    <p class="text-sm">马鞍山市中心医院住院部</p>
                                </div>
                                <div class="mt-3 flex items-center space-x-2">
                                    <span class="text-sm text-gray-600">预估公里数：</span>
                                    <span class="text-sm font-medium text-blue-600">8</span>
                                    <span class="text-sm text-gray-600">公里</span>
                                </div>
                            </div>
                        </div>

                        <!-- 患者基本信息 -->
                        <div class="bg-white rounded border border-gray-200 p-6">
                            <h3 class="text-lg font-bold mb-4 flex items-center">
                                <div class="w-5 h-5 flex items-center justify-center mr-2">
                                    <i class="ri-user-line text-lg"></i>
                                </div>
                                患者基本信息
                            </h3>
                            <div class="space-y-4">
                                <div class="grid grid-cols-3 gap-8">
                                    <div>
                                        <span class="text-sm text-gray-600">患者是否能独立行走：</span>
                                        <span class="text-sm">否</span>
                                    </div>
                                    <div>
                                        <span class="text-sm text-gray-600">患者性别：</span>
                                        <span class="text-sm">男</span>
                                    </div>
                                    <div>
                                        <span class="text-sm text-gray-600">患者确诊情况：</span>
                                        <span class="text-sm">是</span>
                                    </div>
                                </div>
                                <div class="space-y-4">
                                    <div>
                                        <span class="text-sm text-gray-600">
                                            <span class="text-red-500">*</span> 患者姓名
                                        </span>
                                        <p class="text-sm mt-1">张三</p>
                                    </div>
                                    <div>
                                        <span class="text-sm text-gray-600">
                                            <span class="text-red-500">*</span> 身份证号
                                        </span>
                                        <p class="text-sm mt-1">340521199001011234</p>
                                    </div>
                                    <div>
                                        <span class="text-sm text-gray-600">患者情况</span>
                                        <p class="text-sm mt-1">患者需要卧床转运，有轻微呼吸困难，需要氧气支持。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 联系人信息 -->
                        <div class="bg-white rounded border border-gray-200 p-6">
                            <h3 class="text-lg font-bold mb-4 flex items-center">
                                <div class="w-5 h-5 flex items-center justify-center mr-2">
                                    <i class="ri-contacts-line text-lg"></i>
                                </div>
                                联系人信息
                            </h3>
                            <div class="space-y-4">
                                <div>
                                    <span class="text-sm text-gray-600">
                                        <span class="text-red-500">*</span> 联系人姓名
                                    </span>
                                    <p class="text-sm mt-1">李华</p>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-600">与患者关系</span>
                                    <p class="text-sm mt-1">儿子</p>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-600">
                                        <span class="text-red-500">*</span> 联系电话
                                    </span>
                                    <p class="text-sm mt-1">183****5217</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧第一列：陪护信息 -->
                    <div class="w-80 space-y-6">
                        <!-- 陪护信息 -->
                        <div class="bg-white rounded border border-gray-200 p-6">
                            <h3 class="text-lg font-bold mb-4">陪护信息</h3>
                            <div class="mb-4">
                                <span class="text-sm text-gray-600">是否需要陪护中的专业服务</span>
                                <div class="mt-1">
                                    <span class="text-sm">是</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <span class="text-red-500">*</span>
                                <span class="text-sm font-medium">服务类型</span>
                                <div class="mt-1">
                                    <span class="text-sm">普通护送</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <span class="text-sm text-gray-600">服务说明</span>
                                <p class="text-xs text-gray-600 mt-1">仅司机护送，适合病情稳定、无特殊需求的患者</p>
                            </div>
                            <div class="mb-4">
                                <span class="text-sm text-gray-600">其他特殊需求</span>
                                <p class="text-sm mt-1">需要氧气设备</p>
                            </div>
                            <div class="mb-6">
                                <span class="text-sm text-gray-600">
                                    <span class="text-red-500">*</span> 家属随行人数
                                </span>
                                <p class="text-sm mt-1">2人</p>
                            </div>
                        </div>

                        <!-- 任务派遣信息（已分配后显示） -->
                        <div class="bg-white rounded border border-gray-200 p-6" id="dispatch-info" style="display: none;">
                            <h3 class="text-lg font-bold mb-4">任务派遣信息</h3>
                            <div class="space-y-4">
                                <div>
                                    <span class="text-sm text-gray-600">已指派车辆</span>
                                    <p class="text-sm mt-1 font-medium">皖E584552 - 救护车</p>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-600">指派司机</span>
                                    <p class="text-sm mt-1">张晓利 - 13987654321</p>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-600">指派陪护人员</span>
                                    <p class="text-sm mt-1">刘护士</p>
                                </div>
                                <div>
                                    <span class="text-sm text-gray-600">指派医护人员</span>
                                    <p class="text-sm mt-1">王医生</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧第二列：费用信息 -->
                    <div class="w-80 space-y-6">
                        <!-- 费用信息 -->
                        <div class="bg-white rounded border border-gray-200 p-6">
                            <h3 class="text-lg font-bold mb-4">费用信息</h3>
                            <div class="space-y-3 mb-6">
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">基础费用</span>
                                    <span class="text-blue-600 font-medium">¥300</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">距离费用（8公里×10元/公里）</span>
                                    <span class="text-blue-600 font-medium">¥80</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">陪护费用</span>
                                    <span class="text-blue-600 font-medium">¥0</span>
                                </div>
                                <div class="flex justify-between items-center py-2 border-t border-gray-200">
                                    <span class="text-sm font-medium">总费用</span>
                                    <span class="text-blue-600 font-bold text-lg">¥380</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">定金(30%)</span>
                                    <span class="text-blue-600 font-medium">¥114</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">特殊付费款</span>
                                    <span class="text-blue-600 font-medium">¥266</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">支付状态</span>
                                    <span class="text-sm font-medium text-green-600" id="payment-status">已支付定金</span>
                                </div>
                            </div>
                        </div>

                        <!-- 取消原因（已取消状态显示） -->
                        <div class="bg-white rounded border border-gray-200 p-6" id="cancel-reason" style="display: none;">
                            <h3 class="text-lg font-bold mb-4">取消原因</h3>
                            <p class="text-sm text-gray-600" id="cancel-reason-text">患者病情变化，不需要转运服务</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 分配指派模态框 -->
    <div id="assign-modal" class="modal">
        <div class="modal-content">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium">分配指派</h3>
                    <button type="button" class="text-gray-400 hover:text-gray-600" id="close-assign-modal">
                        <i class="ri-close-line text-xl"></i>
                    </button>
                </div>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">选择车辆</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="vehicle-select">
                            <option value="">请选择车辆</option>
                            <option value="皖E584552">皖E584552 - 救护车</option>
                            <option value="皖E23456">皖E23456 - 救护车</option>
                            <option value="皖E34567">皖E34567 - 转运车</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">选择司机</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="driver-select">
                            <option value="">请选择司机</option>
                            <option value="张晓利">张晓利 - 13812345678</option>
                            <option value="李师傅">李师傅 - 13912345678</option>
                            <option value="赵师傅">赵师傅 - 13712345678</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">选择陪护人员</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="escort-select">
                            <option value="">请选择陪护人员</option>
                            <option value="刘护士">刘护士</option>
                            <option value="陈护士">陈护士</option>
                            <option value="张护士">张护士</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">选择医护人员</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded text-sm" id="medical-select">
                            <option value="">请选择医护人员</option>
                            <option value="王医生">王医生</option>
                            <option value="李医生">李医生</option>
                            <option value="张医生">张医生</option>
                        </select>
                    </div>
                </div>
                <div class="flex space-x-3 mt-6">
                    <button class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded !rounded-button whitespace-nowrap hover:bg-gray-200 transition-colors" id="cancel-assign">
                        取消
                    </button>
                    <button class="flex-1 px-4 py-2 bg-blue-600 text-white rounded !rounded-button whitespace-nowrap hover:bg-blue-700 transition-colors" id="confirm-assign">
                        确认分配
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知消息 -->
    <div id="notification" class="notification"></div>

    <!-- 状态切换按钮（演示用） -->
    <div class="fixed bottom-4 right-4 bg-white rounded-lg shadow-lg p-4 space-y-2">
        <div class="text-sm font-medium mb-2">状态切换（演示用）</div>
        <button class="block w-full px-3 py-1 text-xs bg-yellow-100 text-yellow-800 rounded hover:bg-yellow-200" onclick="changeStatus('pending')">待分配</button>
        <button class="block w-full px-3 py-1 text-xs bg-blue-100 text-blue-800 rounded hover:bg-blue-200" onclick="changeStatus('assigned')">已分配</button>
        <button class="block w-full px-3 py-1 text-xs bg-indigo-100 text-indigo-800 rounded hover:bg-indigo-200" onclick="changeStatus('in_progress')">进行中</button>
        <button class="block w-full px-3 py-1 text-xs bg-green-100 text-green-800 rounded hover:bg-green-200" onclick="changeStatus('completed')">已完成</button>
        <button class="block w-full px-3 py-1 text-xs bg-red-100 text-red-800 rounded hover:bg-red-200" onclick="changeStatus('cancelled')">已取消</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取当前订单状态（这里模拟，实际应该从URL参数或API获取）
            let currentStatus = 'pending'; // pending, assigned, in_progress, completed, cancelled
            
            // 时间线数据配置
            const timelineData = {
                pending: [
                    {
                        id: 'order-verify',
                        title: '订单核实',
                        time: '2024-01-15 14:32:15',
                        detail: '订单信息已核实，确认转运需求',
                        status: 'completed',
                        step: 1
                    },
                    {
                        id: 'deposit-paid',
                        title: '定金支付',
                        time: '2024-01-15 14:35:12',
                        detail: '定金 ¥114 已支付',
                        status: 'completed',
                        step: 2
                    },
                    {
                        id: 'vehicle-assign',
                        title: '分配指派',
                        time: '--',
                        detail: '等待分配车辆和人员',
                        status: 'current',
                        step: 3
                    },
                    {
                        id: 'transport-start',
                        title: '转运开始',
                        time: '--',
                        detail: '司机已出发前往起点',
                        status: 'pending',
                        step: 4
                    },
                    {
                        id: 'transport-complete',
                        title: '转运完成',
                        time: '--',
                        detail: '患者已安全送达目的地',
                        status: 'pending',
                        step: 5
                    },
                    {
                        id: 'payment-complete',
                        title: '费用结算',
                        time: '--',
                        detail: '服务费用结算完成',
                        status: 'pending',
                        step: 6
                    }
                ],
                assigned: [
                    {
                        id: 'order-verify',
                        title: '订单核实',
                        time: '2024-01-15 14:32:15',
                        detail: '订单信息已核实，确认转运需求',
                        status: 'completed',
                        step: 1
                    },
                    {
                        id: 'deposit-paid',
                        title: '定金支付',
                        time: '2024-01-15 14:35:12',
                        detail: '定金 ¥114 已支付',
                        status: 'completed',
                        step: 2
                    },
                    {
                        id: 'vehicle-assign',
                        title: '分配指派',
                        time: '2024-01-15 14:45:10',
                        detail: '车辆：皖E584552，司机：张晓利，陪护：刘护士，医护：王医生',
                        status: 'completed',
                        step: 3
                    },
                    {
                        id: 'transport-start',
                        title: '转运开始',
                        time: '--',
                        detail: '等待司机出发',
                        status: 'current',
                        step: 4
                    },
                    {
                        id: 'transport-complete',
                        title: '转运完成',
                        time: '--',
                        detail: '患者将安全送达目的地',
                        status: 'pending',
                        step: 5
                    },
                    {
                        id: 'payment-complete',
                        title: '费用结算',
                        time: '--',
                        detail: '服务费用待结算',
                        status: 'pending',
                        step: 6
                    }
                ],
                in_progress: [
                    {
                        id: 'order-verify',
                        title: '订单核实',
                        time: '2024-01-15 14:32:15',
                        detail: '订单信息已核实，确认转运需求',
                        status: 'completed',
                        step: 1
                    },
                    {
                        id: 'deposit-paid',
                        title: '定金支付',
                        time: '2024-01-15 14:35:12',
                        detail: '定金 ¥114 已支付',
                        status: 'completed',
                        step: 2
                    },
                    {
                        id: 'vehicle-assign',
                        title: '分配指派',
                        time: '2024-01-15 14:45:10',
                        detail: '车辆：皖E584552，司机：张晓利，陪护：刘护士，医护：王医生',
                        status: 'completed',
                        step: 3
                    },
                    {
                        id: 'transport-start',
                        title: '转运开始',
                        time: '2024-01-15 15:30:00',
                        detail: '司机已出发前往起点，预计15分钟到达',
                        status: 'completed',
                        step: 4
                    },
                    {
                        id: 'transport-complete',
                        title: '转运完成',
                        time: '--',
                        detail: '正在转运中，预计16:00到达目的地',
                        status: 'current',
                        step: 5
                    },
                    {
                        id: 'payment-complete',
                        title: '费用结算',
                        time: '--',
                        detail: '服务费用待结算',
                        status: 'pending',
                        step: 6
                    }
                ],
                completed: [
                    {
                        id: 'order-verify',
                        title: '订单核实',
                        time: '2024-01-15 14:32:15',
                        detail: '订单信息已核实，确认转运需求',
                        status: 'completed',
                        step: 1
                    },
                    {
                        id: 'deposit-paid',
                        title: '定金支付',
                        time: '2024-01-15 14:35:12',
                        detail: '定金 ¥114 已支付',
                        status: 'completed',
                        step: 2
                    },
                    {
                        id: 'vehicle-assign',
                        title: '分配指派',
                        time: '2024-01-15 14:45:10',
                        detail: '车辆：皖E584552，司机：张晓利，陪护：刘护士，医护：王医生',
                        status: 'completed',
                        step: 3
                    },
                    {
                        id: 'transport-start',
                        title: '转运开始',
                        time: '2024-01-15 15:30:00',
                        detail: '司机已出发前往起点',
                        status: 'completed',
                        step: 4
                    },
                    {
                        id: 'transport-complete',
                        title: '转运完成',
                        time: '2024-01-15 16:15:30',
                        detail: '患者已安全送达马鞍山市中心医院住院部',
                        status: 'completed',
                        step: 5
                    },
                    {
                        id: 'payment-complete',
                        title: '费用结算',
                        time: '2024-01-15 16:20:15',
                        detail: '服务费用 ¥266 已结算完成',
                        status: 'completed',
                        step: 6
                    }
                ],
                cancelled: [
                    {
                        id: 'order-verify',
                        title: '订单核实',
                        time: '2024-01-15 14:32:15',
                        detail: '订单信息已核实，确认转运需求',
                        status: 'completed',
                        step: 1
                    },
                    {
                        id: 'deposit-paid',
                        title: '定金支付',
                        time: '2024-01-15 14:35:12',
                        detail: '定金 ¥114 已支付',
                        status: 'completed',
                        step: 2
                    },
                    {
                        id: 'order-cancelled',
                        title: '订单取消',
                        time: '2024-01-15 15:00:00',
                        detail: '取消原因：患者病情变化，不需要转运服务',
                        status: 'current',
                        step: 3
                    }
                ]
            };
            
            // 更新时间线
            function updateTimeline(status) {
                const timeline = document.getElementById('order-timeline');
                const data = timelineData[status] || timelineData.pending;
                
                let timelineHTML = '';
                
                data.forEach((item, index) => {
                    // 节点
                    timelineHTML += `
                        <div class="timeline-step ${item.status}">
                            <div class="timeline-node ${item.status}">
                                ${item.step}
                            </div>
                            <div class="timeline-title">${item.title}</div>
                            <div class="timeline-time">${item.time}</div>
                            <div class="timeline-detail">${item.detail.length > 15 ? item.detail.substring(0, 15) + '...' : item.detail}</div>
                            
                            <!-- 悬停显示详情 -->
                            <div class="timeline-detail-popup">
                                <div class="timeline-detail-popup-title">${item.title}</div>
                                <div class="timeline-detail-popup-time">${item.time}</div>
                                <div class="timeline-detail-popup-content">${item.detail}</div>
                            </div>
                        </div>
                    `;
                    
                    // 连接线（除了最后一个节点）
                    if (index < data.length - 1) {
                        const nextItem = data[index + 1];
                        const connectorClass = item.status === 'completed' ? 'completed' : '';
                        timelineHTML += `<div class="timeline-connector ${connectorClass}"></div>`;
                    }
                });
                
                timeline.innerHTML = timelineHTML;
            }
            
            // 更新页面状态
            function updatePageStatus(status) {
                const statusBadge = document.getElementById('order-status');
                const detailStatus = document.getElementById('detail-status');
                const actionBtn = document.getElementById('action-btn');
                const headerCancelBtn = document.getElementById('header-cancel-btn');
                const dispatchInfo = document.getElementById('dispatch-info');
                const cancelReason = document.getElementById('cancel-reason');
                const paymentStatus = document.getElementById('payment-status');
                
                // 清除所有状态类
                statusBadge.className = 'status-badge';
                
                switch(status) {
                    case 'pending':
                        statusBadge.classList.add('status-pending');
                        statusBadge.textContent = '待分配';
                        detailStatus.textContent = '待分配';
                        actionBtn.innerHTML = '<i class="bi bi-people-fill me-2"></i>分配指派';
                        actionBtn.style.display = 'block';
                        headerCancelBtn.style.display = 'block';
                        dispatchInfo.style.display = 'none';
                        cancelReason.style.display = 'none';
                        paymentStatus.textContent = '已支付定金';
                        break;
                        
                    case 'assigned':
                        statusBadge.classList.add('status-assigned');
                        statusBadge.textContent = '已分配';
                        detailStatus.textContent = '已分配';
                        actionBtn.innerHTML = '<i class="bi bi-play-circle me-2"></i>开始转运';
                        actionBtn.style.display = 'block';
                        headerCancelBtn.style.display = 'block';
                        dispatchInfo.style.display = 'block';
                        cancelReason.style.display = 'none';
                        paymentStatus.textContent = '已支付定金';
                        break;
                        
                    case 'in_progress':
                        statusBadge.classList.add('status-in-progress');
                        statusBadge.textContent = '进行中';
                        detailStatus.textContent = '进行中';
                        actionBtn.innerHTML = '<i class="bi bi-check-circle me-2"></i>完成转运';
                        actionBtn.style.display = 'block';
                        headerCancelBtn.style.display = 'none';
                        dispatchInfo.style.display = 'block';
                        cancelReason.style.display = 'none';
                        paymentStatus.textContent = '已支付定金';
                        break;
                        
                    case 'completed':
                        statusBadge.classList.add('status-completed');
                        statusBadge.textContent = '已完成';
                        detailStatus.textContent = '已完成';
                        actionBtn.style.display = 'none';
                        headerCancelBtn.style.display = 'none';
                        dispatchInfo.style.display = 'block';
                        cancelReason.style.display = 'none';
                        paymentStatus.textContent = '已全额支付';
                        break;
                        
                    case 'cancelled':
                        statusBadge.classList.add('status-cancelled');
                        statusBadge.textContent = '已取消';
                        detailStatus.textContent = '已取消';
                        actionBtn.innerHTML = '<i class="bi bi-arrow-clockwise me-2"></i>重新分配';
                        actionBtn.style.display = 'block';
                        headerCancelBtn.style.display = 'none';
                        dispatchInfo.style.display = 'none';
                        cancelReason.style.display = 'block';
                        paymentStatus.textContent = '定金已退款';
                        break;
                }
                
                // 更新时间线
                updateTimeline(status);
                currentStatus = status;
            }
            
            // 显示通知消息
            function showNotification(message, type = 'success') {
                const notification = document.getElementById('notification');
                notification.textContent = message;
                notification.className = 'notification ' + type;
                notification.classList.add('show');
                
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 3000);
            }
            
            // 模态框控制
            const assignModal = document.getElementById('assign-modal');
            const closeAssignModal = document.getElementById('close-assign-modal');
            const actionBtn = document.getElementById('action-btn');
            const headerCancelBtn = document.getElementById('header-cancel-btn');
            const confirmAssign = document.getElementById('confirm-assign');
            const cancelAssign = document.getElementById('cancel-assign');
            
            actionBtn.addEventListener('click', function() {
                if (currentStatus === 'pending') {
                    assignModal.classList.add('show');
                } else if (currentStatus === 'assigned') {
                    updatePageStatus('in_progress');
                    showNotification('转运已开始');
                } else if (currentStatus === 'in_progress') {
                    updatePageStatus('completed');
                    showNotification('转运已完成');
                } else if (currentStatus === 'cancelled') {
                    updatePageStatus('pending');
                    showNotification('订单已重新开启');
                }
            });
            
            headerCancelBtn.addEventListener('click', function() {
                if (confirm('确定要取消此订单吗？')) {
                    updatePageStatus('cancelled');
                    showNotification('订单已取消');
                }
            });
            
            closeAssignModal.addEventListener('click', function() {
                assignModal.classList.remove('show');
            });
            
            cancelAssign.addEventListener('click', function() {
                assignModal.classList.remove('show');
            });
            
            confirmAssign.addEventListener('click', function() {
                const vehicle = document.getElementById('vehicle-select').value;
                const driver = document.getElementById('driver-select').value;
                const escort = document.getElementById('escort-select').value;
                const medical = document.getElementById('medical-select').value;
                
                if (vehicle && driver && escort && medical) {
                    assignModal.classList.remove('show');
                    updatePageStatus('assigned');
                    showNotification('分配指派成功');
                    
                    // 清空选择
                    document.getElementById('vehicle-select').value = '';
                    document.getElementById('driver-select').value = '';
                    document.getElementById('escort-select').value = '';
                    document.getElementById('medical-select').value = '';
                } else {
                    showNotification('请填写完整信息', 'error');
                }
            });
            
            // 点击模态框外部关闭
            assignModal.addEventListener('click', function(e) {
                if (e.target === assignModal) {
                    assignModal.classList.remove('show');
                }
            });
            
            // 全局状态切换函数
            window.changeStatus = function(status) {
                updatePageStatus(status);
                showNotification(`状态已切换为：${getStatusText(status)}`);
            };
            
            function getStatusText(status) {
                const statusMap = {
                    'pending': '待分配',
                    'assigned': '已分配',
                    'in_progress': '进行中',
                    'completed': '已完成',
                    'cancelled': '已取消'
                };
                return statusMap[status] || status;
            }
            
            // 导航栏切换
            document.querySelectorAll('.nav-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有活动状态
                    document.querySelectorAll('.nav-item').forEach(nav => {
                        nav.classList.remove('active');
                        nav.style.color = '#374151';
                        nav.style.fontWeight = 'normal';
                        
                        // 移除底部指示条
                        const indicator = nav.querySelector('span:last-child');
                        if (indicator && indicator.style.background) {
                            indicator.style.background = '';
                            indicator.style.width = '0';
                        }
                    });
                    
                    // 添加活动状态到当前项
                    this.classList.add('active');
                    this.style.color = '#3B82F6';
                    this.style.fontWeight = '600';
                    
                    // 添加底部指示条
                    let indicator = this.querySelector('span:last-child');
                    if (!indicator || !indicator.style.background) {
                        indicator = document.createElement('span');
                        indicator.style.cssText = 'content: ""; position: absolute; bottom: 0; left: 50%; width: 80%; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);';
                        this.appendChild(indicator);
                    }
                });
            });

            // 为所有非活动导航项添加悬停效果
            document.querySelectorAll('.nav-item:not(.active)').forEach(item => {
                item.addEventListener('mouseenter', function() {
                    const indicator = document.createElement('span');
                    indicator.style.cssText = 'content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: linear-gradient(90deg, #3B82F6, #1E40AF); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%);';
                    indicator.classList.add('hover-indicator');
                    this.appendChild(indicator);
                    
                    setTimeout(() => {
                        indicator.style.width = '80%';
                    }, 10);
                });
                
                item.addEventListener('mouseleave', function() {
                    const indicator = this.querySelector('.hover-indicator');
                    if (indicator) {
                        indicator.style.width = '0';
                        setTimeout(() => {
                            if (indicator.parentNode) {
                                indicator.remove();
                            }
                        }, 300);
                    }
                });
            });
            
            // 初始化页面
            updatePageStatus(currentStatus);
        });
    </script>
</body>
</html>